﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>拖动DIV</title>
    <style type="text/css">
        #show_tab
        {
            background: red ;
            width: 232px;
            height: 55px;
            text-align: center;
            position: absolute;
            z-index: 1;
            left: 100px;
            top: 100px;
        }
    </style>
    <script src="../Scripts/JQuery-1-10-2.js" type="text/javascript"></script>
    <script src="../Scripts/Common.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            //必须设置div的position为absolute，不设置默认为static静止的


            $("#my_div").mousedown(function (e)//e鼠标事件   当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
            {
                $(this).css("cursor", "pointer"); //改变鼠标指针的形状 

                var offset = $(this).offset(); //DIV在页面的位置 
                var x = e.pageX - offset.left; //获得鼠标指针离DIV元素左边界的距离 
                var y = e.pageY - offset.top; //获得鼠标指针离DIV元素上边界的距离 
                $(document).bind("mousemove", function (ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 
                {
                    $("#my_div").stop(); //加上这个之后 

                    var _x = ev.pageX - x; //获得X轴方向移动的值 
                    var _y = ev.pageY - y; //获得Y轴方向移动的值 

                    $("#my_div").animate({ left: _x + "px", top: _y + "px" }, 10);
                });

            });

            $(document).mouseup(function () { //当在元素上放松鼠标按钮时，会发生 mouseup 事件
                $("#my_div").css("cursor", "default");
                $(this).unbind("mousemove");
            })


            //            setInterval(function () {
            //                var date = new Date();
            //                var arr = getDJS().split('-');
            //                $("#td_Days").text("0" + (parseInt(arr[0]) + 1));
            //                $("#td_Hours").text(arr[1]);
            //                $("#td_Mins").text(arr[2]);
            //                $("#td_Secs").text(arr[3]);
            //            }, 50);



            $("#show_tab").mousedown(function (e) {
                $(this).css("cursor", "pointer"); //改变鼠标指针的形状 
                var off_div = $(this).offset(); //获得div的位置
                var x = e.pageX - off_div.left; //获得鼠标指针离DIV元素左边界的距离
                var y = e.pageY - off_div.top; //获得鼠标指针离DIV元素上边界的距离
                $(document).bind("mousemove", function (ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 
                {
                    $("#show_tab").stop(); //停止动画

                    var _x = ev.pageX - x; //获得X轴方向移动的值 
                    var _y = ev.pageY - y; //获得Y轴方向移动的值 

                    $("#show_tab").animate({ left: _x + "px", top: _y + "px" }, 10);
                });
            });
            $(document).mouseup(function () {
                $("#show_tab").css("cursor", "default");
                $(this).unbind("mousemove");
            });
        }); 

</script>
</head>
<body>
    <div class="show" id="show_tab">
        <table id="djsTab" style="width: 232px; height: 55px; background: url(http://images2017.cnblogs.com/blog/985607/201708/985607-20170815150240396-1452453245.png);
            text-align: center; text-shadow: 2px 0px 4px grey; font-family: 宋体 SimSun; font-size: 20px;">
            <tr style="height: 15px">
                <td rowspan="2" style="width: 26px;">
                </td>
                <td>
                </td>
                <td>
                </td>
                <td>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td id="td_Days">
                </td>
                <td id="td_Hours">
                </td>
                <td id="td_Mins">
                </td>
                <td id="td_Secs">
                </td>
            </tr>
        </table>
    </div>
    <div id="my_div" style="width: 150px; height: 70px; line-height: 70px; background: lightblue;
        text-align: center; border-radius: 5px; position: absolute;">
        无敌是多么寂寞</div>
    <script type="text/javascript">
 
    </script>
</body>
</html>
